<template>
  <a-modal
    v-model="visible"
    title="编辑"
    @ok="onSubmit"
  >
    <a-form-model
      v-if="visible"
      ref="userForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="username" label="用户名" prop="username">
        <a-input
          v-model="form.username"
          @blur="
            () => {
              $refs.username.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="password" label="密码" prop="password">
        <a-input
          v-model="form.password"
          @blur="
            () => {
              $refs.password.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="realName" label="姓名" prop="realName">
        <a-input
          v-model="form.realName"
          @blur="
            () => {
              $refs.realName.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="email" label="邮箱" prop="email">
        <a-input
          v-model="form.email"
          @blur="
            () => {
              $refs.email.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item ref="mobile" label="手机" prop="mobile">
        <a-input
          v-model="form.mobile"
          @blur="
            () => {
              $refs.mobile.onFieldBlur();
            }
          "
        />
      </a-form-model-item>

      <a-form-model-item label="状态" prop="status">
        <a-switch v-model="form.status"  checked-children="开" un-checked-children="关" default-checked />
      </a-form-model-item>

      <a-form-model-item label="角色" prop="roleIds">
        <a-select v-model="form.roleIds" mode="multiple" :filter-option="filterOption" placeholder="选择角色">
          <a-select-option v-for="item in roleData" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { getAllRoles } from '@/api/role'
import { saveUser, getUserById } from '@/api/user'
import { FormValidate } from '@/utils/rules'

export default {
  name: 'Edit',
  data: function() {
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      other: '',
      visible: false,
      form: {
        id: '',
        username: '',
        realName: '',
        email: '',
        mobile: '',
        status: 1,
        roleIds: []
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        realName: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        email: [{required: true, validator: FormValidate.Form().checkEmail, trigger: 'blur,change'}],
        mobile: [{required: true, validator: FormValidate.Form().checkTel, trigger: 'blur,change'}]
      },
      roleData: [{id: 1, name: 'ceshi1'}, {id: 2, name: 'ceshi2'}]
    }
  },
  mounted() {
    this.getRoleData()
  },
  methods: {
    getRoleData() {
      const _this = this
      getAllRoles().then(res => {
        _this.roleData = res.data
      })
    },
    initData(obj) {
      this.form = obj
      this.visible = true
      this.$nextTick(() => {
        if (this.form.id) {
          getUserById(this.form.id).then(res => {
            this.form.roleIds = res.data.roleIds
          })
        }
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onSubmit() {
      this.$refs.userForm.validate(valid => {
        if (valid) {
          if (!this.form.id) this.form.createUser = this.$store.getters.id
          this.form.modifyUser = this.$store.getters.id
          saveUser(this.form).then(res => {
            if (res.code === '0') {
              this.$message.success('保存成功')
            } else {
              this.$message.error('res.message')
            }

            this.visible = false
            this.$emit('ok')
          })
        }
      })
    }
  }
}
</script>
